<template>
  <main class="author-card">
    <section class="author-card-img">
      <a-avatar
        style="background-color: #87d068"
        :size="55"
        src="https://joeschmoe.io/api/v1/random"
      />
    </section>
    <section class="author-card-info">
      <div class="card-container">
        <a-tabs v-model:activeKey="activeKey" type="card" tabPosition="left">
          <a-tab-pane key="1" tab="姓名">
            <p>魂魂张</p>
          </a-tab-pane>
          <a-tab-pane key="2" tab="兴趣">
            <a-tag color="#55acee">
              <template #icon>
                <i class="iconfont icon-lingdangtubiao"></i>
              </template>
              写作
            </a-tag>
          </a-tab-pane>
          <a-tab-pane key="3" tab="Gitee">
            <a-tag color="#55acee">
              <template #icon>
                <i class="iconfont icon-lingdangtubiao"></i>
              </template>
              https://gitee.com/zh520_kh/diversified-system
            </a-tag>
          </a-tab-pane>
        </a-tabs>
      </div>
    </section>
  </main>
</template>

<script setup lang="ts">
import { ref } from "vue";
let activeKey = ref("2");
</script>

<style lang="scss" scoped>
.author-card {
  width: 100%;
  height: 13em;
  padding: 1em;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 1px 1px 3px #c9c9c9, -1px -1px 3px #ffffff;

  display: flex;
  justify-content: space-between;
  transition: all 0.5s;
  &:hover {
    box-shadow: 5px 5px 17px #c9c9c9, -5px -5px 17px #ffffff;
  }
  &-img {
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background: #e6e6e7;
    box-shadow: 2px 2px 4px #dbdbdb, -2px -2px 4px #f2f2f3;
  }
  &-info {
    width: calc(100% - 6em);
    height: 100%;
    // border: 1px solid red;

    .card-container p {
      margin: 0;
    }
    .card-container > .ant-tabs-card .ant-tabs-content {
      height: 120px;
      margin-top: -16px;
    }
    .card-container > .ant-tabs-card .ant-tabs-content > .ant-tabs-tabpane {
      padding: 16px;
      background: #fff;
    }
    .card-container > .ant-tabs-card > .ant-tabs-nav::before {
      display: none;
    }
    .card-container > .ant-tabs-card .ant-tabs-tab,
    [data-theme="compact"] .card-container > .ant-tabs-card .ant-tabs-tab {
      background: transparent;
      border-color: transparent;
    }
    .card-container > .ant-tabs-card .ant-tabs-tab-active,
    [data-theme="compact"]
      .card-container
      > .ant-tabs-card
      .ant-tabs-tab-active {
      background: #fff;
      border-color: #fff;
    }
    #components-tabs-demo-card-top .code-box-demo {
      padding: 24px;
      overflow: hidden;
      background: #f5f5f5;
    }
    [data-theme="compact"] .card-container > .ant-tabs-card .ant-tabs-content {
      height: 120px;
      margin-top: -8px;
    }
    [data-theme="dark"] .card-container > .ant-tabs-card .ant-tabs-tab {
      background: transparent;
      border-color: transparent;
    }
    [data-theme="dark"] #components-tabs-demo-card-top .code-box-demo {
      background: #000;
    }
    [data-theme="dark"]
      .card-container
      > .ant-tabs-card
      .ant-tabs-content
      > .ant-tabs-tabpane {
      background: #141414;
    }
    [data-theme="dark"] .card-container > .ant-tabs-card .ant-tabs-tab-active {
      background: #141414;
      border-color: #141414;
    }
  }
}
</style>